<template>
  <div class="ccui-image-clipper">
    <div class="ccui-content">
      <!--标题-->
      <div class="ccui-clipper-title">
        <span>{{ title }}</span>
        <i class="iconfont ccui-close" @click="cancel"></i>
      </div>
      <div class="ccui-clipper-center">
        <!--裁切部分-->
        <div class="ccui-clipper-box">
          <canvas ref="canvas"></canvas>
          <!--背景遮罩-->
          <div class="ccui-mask"></div>
          <!--裁切-->
          <div class="ccui-container" ref="canvasCon">
            <canvas ref="pCanvas"></canvas>
          </div>
        </div>
        <!--预览-->
        <div class="ccui-preview-box">
          <p>预览</p>
          <img class="ccui-preview-img" :src="previewImg" alt />
        </div>
      </div>
      <div class="ccui-clipper-footer">
        <div class="ccui-clipper-group">
          <!-- <i class="iconfont ccui-jia" @click="enlarge()"></i>
          <i class="iconfont ccui-jian" @click="narrow()"></i>-->
          <i class="iconfont" @click="enlarge()">+</i>
          <i class="iconfont" @click="narrow()">-</i>
        </div>
        <div class="ccui-clipper-btn">
          <div class="ccui-btn-same ccui-grey-btn" @click="cancel()">取消</div>
          <div class="ccui-btn-same ccui-blue-btn" @click="confirm()">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" src="./imageClipper.ts"></script>
